<template>
	<div class="uploadImage">
		<el-input placeholder="请输入头像链接" v-model="valueTemp" clearable></el-input>
		<el-upload
		  class="uploadButton"
		  :http-request="uploadImg"
		  action=""
		  :show-file-list="false">
		  <el-button size="small" type="primary">点击上传</el-button>
		</el-upload>
	</div>
</template>

<script>
	import {upload} from "@/api/upload.js" 
	export default {
		name: "uploadImage",
		data() {
			return {
				valueTemp: this.value
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		watch:{
			valueTemp(val){
				this.$emit('change', val)
			}
		},
		props: {
			value: ""
		},
		created() {
		},
		methods: {
			uploadImg(param){
				var file = param.file;
				var data = new FormData();
				data.append('file', file);
				data.append('directory', 'img');
				upload(data).then(res => {
					this.valueTemp = res.data;
				});
			}
		},
		created() {
		}
	}
</script>

<style lang="less">
	.uploadImage{
		display: flex;
		width: 100%;
		.el-input{
			margin-right: 2%;
			flex: 1;
		}
		.uploadButton{
			display: inline-block;
			align-self: flex-end;
		}
	}
</style>
